<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生表格</title>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 5px 10px;
            text-align: center;
        }
        input {
            width: 80px;
            text-align: center;
        }
    </style>
</head>
<body>
<script>
    let students = [
        { id:"s01", name: "张三", age: 23, addr: "北京"},
        { id:"s02", name: "李四", age: 24, addr: "上海"},
        { id:"s03", name: "王五", age: 25, addr: "曹县"}
    ];

    function createTable() {
        let table = document.createElement("table");

        let header = table.insertRow();
        ["ID", "姓名", "年龄", "地址", "操作"].forEach(text => {
            let th = document.createElement("th");
            th.innerText = text;
            header.appendChild(th);
        });

        return table;
    }

    function createButton(){
        let button = document.createElement("button");
        button.innerText = "添加";
        button.onclick = function () {
            let id = prompt("请输入学生ID：");
            if (!id) return;

            let name = prompt("请输入学生姓名：");
            if (!name) return;

            let age = +prompt("请输入学生年龄：");
            if (isNaN(age) || age <= 0) {
                alert("年龄输入不正确！");
                return;
            }

            let addr = prompt("请输入学生地址：");
            if (!addr) return;

            students.push({ id, name, age: +age, addr });

            renderTable(table, students);
        };

        document.body.appendChild(button);
    }

    function renderTable(table, data) {
        while (table.rows.length > 1) {
            table.deleteRow(1);
        }

        data.forEach((stu, index) => {
            let row = table.insertRow();

            // ID 不可编辑
            let idCell = row.insertCell();
            idCell.innerText = stu.id;

            // 其他字段可编辑，默认展示文本
            let nameCell = row.insertCell();
            nameCell.innerText = stu.name;

            let ageCell = row.insertCell();
            ageCell.innerText = stu.age;

            let addrCell = row.insertCell();
            addrCell.innerText = stu.addr;

            let actionCell = row.insertCell();

            let delBtn = document.createElement("button");
            delBtn.innerText = "删除";
            delBtn.onclick = () => {
                if (confirm("确定要删除这条数据吗？")) {
                    data.splice(index, 1);
                    renderTable(table, data);
                }
            };

            let editBtn = document.createElement("button");
            editBtn.innerText = "修改";
            editBtn.onclick = () => {
                // 点击修改，把单元格换成 input
                nameCell.innerHTML = `<input type="text" value="${stu.name}">`;
                ageCell.innerHTML = `<input type="number" value="${stu.age}">`;
                addrCell.innerHTML = `<input type="text" value="${stu.addr}">`;

                // 修改按钮变成提交按钮
                editBtn.style.display = "none";
                let saveBtn = document.createElement("button");
                saveBtn.innerText = "提交";

                saveBtn.onclick = () => {
                    let newName = nameCell.querySelector("input").value.trim();
                    let newAge = +ageCell.querySelector("input").value;
                    let newAddr = addrCell.querySelector("input").value.trim();

                    if (!newName || isNaN(newAge) || newAge <= 0 || !newAddr) {
                        alert("输入不正确！");
                        return;
                    }

                    // 更新数据
                    data[index].name = newName;
                    data[index].age = newAge;
                    data[index].addr = newAddr;

                    renderTable(table, data);
                };

                actionCell.appendChild(saveBtn);
            };

            actionCell.appendChild(delBtn);
            actionCell.appendChild(editBtn);
        });
    }

    let table = createTable();
    document.body.appendChild(table);
    renderTable(table, students);
    createButton();
</script>
</body>
</html>
